﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ZRender</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="ZRender">
    <meta name="author" content="linzhifeng@baidu.com">

    <script src="../asset/js/esl/esl.js"></script>
    <link href="../asset/css/bootstrap.css" rel="stylesheet">
    <link href="../asset/css/bootstrap-responsive.css" rel="stylesheet">
    <link href="../asset/css/zrenderHome.css" rel="stylesheet">
    <link rel="shortcut icon" href="../asset/ico/favicon.png">
</head>

<body>
    <!-- NAVBAR
    ================================================== -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="../../index.html">ZRender</a>
          <div class="nav-collapse collapse">
              <a id="forkme_banner" href="https://github.com/ecomfe/zrender">View on GitHub</a>
              <ul class="nav">
                <li><a href="../../index.html"><i class="icon-home icon-white"></i> Home</a></li>
                <li class="active dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Example <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="demo.html">Demo</a></li>
                    <li><a href="animation.html">Animation</a></li>
                    <li><a href="chart.html">Chart</a></li>
                    <li><a href="colorSeries.html">Color Series</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li class="active"><a href="artist.html">Artist</a></li>
                    <li><a href="slice.html">slice</a></li>
                  </ul>
                </li>
                <li><a href="../doc.html">API &amp; Doc</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-download-alt icon-white"></i>Download <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe/zrender/archive/2.0.2.zip">ZIP (2.0.2)</a></li>
                    <li><a href="https://github.com/ecomfe/zrender/archive/master.zip">ZIP (Latest)</a></li>
                  </ul>
                </li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Link <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li><a href="https://github.com/ecomfe" target="_blank">Ecom-FE</a></li>
                    <li><a href="http://fe.baidu.com/doc/ecom/tech/topic/dv/index.html" target="_blank">Data Visualization</a></li>
                    <li class="divider"></li>
                    <!--li class="nav-header">Library</li-->
                    <li><a href="http://tangram.baidu.com/" target="_blank">Tangram</a></li>
                  </ul>
                </li>
              </ul>
           </div><!--/.nav-collapse -->
        </div><!-- /.container -->
      </div><!-- /.navbar-inner -->
    </div><!-- /.navbar-wrapper -->

    <div class="container">
        <div class="row">
            <div class="span12">
                <div id="main" class="main" style="cursor: none !important"></div>
                <button id="refresh">Refresh ~</button>
                <span id='wrong-message' style="color:red"></span>
            </div>
        </div><!--/row-->
        <hr>
        <!-- FOOTER -->
        <footer>
          <p class="pull-right"><a href="#">Back to top</a></p>
          <p>&copy; 2013 ECOM-FE &middot; <a href="https://github.com/ecomfe/zrender/blob/master/LICENSE.txt" target="_blank">Terms</a> &middot; <a href="../changelog.html" target="_blank">Changelog</a></p>
        </footer>
    </div><!--/.fluid-container-->

    <script src="../asset/js/jquery.js"></script>
    <script src="../asset/js/bootstrap-transition.js"></script>
    <script src="../asset/js/bootstrap-alert.js"></script>
    <script src="../asset/js/bootstrap-modal.js"></script>
    <script src="../asset/js/bootstrap-dropdown.js"></script>
    <script src="../asset/js/bootstrap-scrollspy.js"></script>
    <script src="../asset/js/bootstrap-tab.js"></script>
    <script src="../asset/js/bootstrap-tooltip.js"></script>
    <script src="../asset/js/bootstrap-popover.js"></script>
    <script src="../asset/js/bootstrap-button.js"></script>
    <script src="../asset/js/bootstrap-collapse.js"></script>
    <script src="../asset/js/bootstrap-carousel.js"></script>
    <script src="../asset/js/bootstrap-typeahead.js"></script>
    <script type="text/javascript">
        var developMode = false;
        if (developMode) {
            // for develop
            require.config({
                packages: [
                    {
                        name: 'zrender',
                        location: '../../src',
                        main: 'zrender'
                    }
                ]
            });
        }
        else {
            // for echarts online home page
            var fileLocation = './www/js/zrender';
            require.config({
                paths:{ 
                    zrender: fileLocation,
                    'zrender/shape/Circle': fileLocation,
                    'zrender/shape/Rectangle': fileLocation,
                    'zrender/shape/Ring': fileLocation,
                    'zrender/shape/Polygon': fileLocation
                }
            });
        }

        require(
            ['zrender', 'zrender/shape/Circle', 'zrender/shape/Rectangle', 'zrender/shape/Ring', 'zrender/shape/Polygon'],
            function(zrender, CircleShape, RectangleShape, RingShape, PolygonShape) {
                zr = zrender.init(document.getElementById('main'));
                var eventTool = require('zrender/tool/event');
                var myPalette = ['#ffa500','#87cefa','#da70d6','#32cd32','#ff7f50','#ba55d3','#6495ed','#cd5c5c'];
                var width = Math.ceil(zr.getWidth());
                var height = Math.ceil(zr.getHeight());
                var brush;
                var curPalette;
                var isMobile = navigator.userAgent.match(/mobile/i);
                document.getElementById('refresh').onclick = init;

                init();
                function init(){
                    document.getElementById('wrong-message').innerHTML = '';
                    zr.clear();

                    buildBrush();

                    buildPalette();

                    Draft();

                    zr.render();
                }

                function buildBrush() {
                    brush = new CircleShape({
                        zlevel : 3, // 频繁变动的画笔单独在一层中
                        style : {
                            x : width / 2,
                            y : height / 2,
                            r : 10,
                            brushType : 'both',
                            color : myPalette[0],
                            strokeColor : 'yellow',
                            lineWidth : 5
                        },
                        _colorIdx : 0,
                        hoverable : false   // default true
                    })

                    if (!isMobile) {
                        zr.addShape(brush);
                        zr.on(
                            'mousemove',
                            function(params) {
                                brush.style.x = eventTool.getX(params.event);
                                brush.style.y = eventTool.getY(params.event);
                                zr.modShape(brush.id, brush);
                                zr.refresh();
                            }
                        );

                        zr.on(
                            'mousewheel',
                            function(params) {
                                eventTool.stop(params.event);
                                brush._colorIdx = (brush._colorIdx + 1) % myPalette.length;
                                brush.style.color = myPalette[brush._colorIdx];
                                zr.modShape(brush.id, brush);
                                zr.refresh();
                            }
                        );
                    }
                }

                function buildPalette() {
                    var length = myPalette.length;
                    var pWidth = 60;
                    var pHeight = 40;
                    var startY = 5;
                    var space = Math.round((height - 10 - pHeight * length) / (length - 1));
                    for (var i = 0; i < length; i++) {
                        zr.addShape(new RectangleShape({
                            shape : 'rectangle',
                            zlevel : 0,             // 默认为0，不变的图形元素可以单独一层
                            style : {
                                x : 5,
                                y : startY,
                                width : pWidth,
                                height: pHeight,
                                color : myPalette[i]
                            },
                            _colorIdx : i,
                            hoverable: false,
                            clickable : true,
                            onclick : paletteHandler
                        }));
                        startY += pHeight + space;
                    }
                    curPalette = new RectangleShape({
                        shape : 'rectangle',
                        zlevel : 1,             // 偶尔需要改变的图形元素单独一层
                        style : {
                            x : 5,
                            y : 5,
                            width : pWidth,
                            height: pHeight,
                            strokeColor : 'yellow',
                            lineWidth : 4,
                            brushType : 'stroke'
                        },
                        hoverable: false
                    });
                    zr.addShape(curPalette);
                }

                function paletteHandler(params) {
                    var target = params.target;
                    brush.style.color = target.style.color;
                    brush._colorIdx = target._colorIdx;

                    if (!isMobile) {
                        zr.modShape(brush.id, brush);
                    }


                    curPalette.style.x = target.style.x;
                    curPalette.style.y = target.style.y;
                    zr.modShape(curPalette.id, curPalette);

                    zr.refresh();
                }

                function Draft() {
                    var shapeList = [];
                    shapeList.push(new PolygonShape({
                        style : {
                            pointList : [[180, 250], [680, 250], [580, 350], [80, 350]]
                        }
                    }));
                    shapeList.push(new PolygonShape({
                        style : {
                            pointList : [[300, 150], [400, 200], [200, 200]]
                        }
                    }));
                    shapeList.push(new RectangleShape({
                        style : {
                            x : 240,
                            y : 200,
                            width : 120,
                            height : 100
                        }
                    }));
                    shapeList.push(new RectangleShape({
                        style : {
                            x : 280,
                            y : 260,
                            width : 40,
                            height : 40
                        }
                    }));
                    for (var i = 0; i < 15; i++) {
                        shapeList.push(new CircleShape({
                            style : {
                                x : Math.ceil(Math.random() * 500 + 100),
                                y : Math.ceil(Math.random() * 130 + 20),
                                r : Math.ceil(Math.random() * 20 + 5)
                            }
                        }));
                    }
                    for (var i = 0; i < 15; i++) {
                        shapeList.push(new RingShape({
                            style : {
                                x : 900,
                                y : 200,
                                r0: i * 12,
                                r : (i + 1) * 12
                            }
                        }));
                    }
                    for (var i = 0, l = shapeList.length; i < l; i++) {
                        shapeList[i].zlevel = 1;             // 偶尔需要改变的图形元素单独一层
                        shapeList[i].style.brushType = 'both';
                        shapeList[i].style.strokeColor = 'black';
                        shapeList[i].style.color = 'white';
                        shapeList[i].style.lineWidth = 2;
                        shapeList[i].hoverable = false;
                        shapeList[i].clickable = true;
                        shapeList[i].onclick = contentHandler;
                        zr.addShape(shapeList[i]);
                    }

                }

                function contentHandler(params) {
                    var target = params.target;
                    target.style.color = brush.style.color;
                    target.style.strokeColor = 'white';
                    zr.modShape(target.id, target);
                    zr.refresh();
                }
            }
        )
    </script>
</body>
</html>